<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in arr">{{item}}</li>
			</ul>
			<span>方法来实现数组的和：{{sum()}}</span>
			<span>方法来实现数组的和：{{sum()}}</span>
			<div>
			</div>
			<span>计算属性来实现数组的和：{{csum}}</span>
			<!-- 计算属性带有缓存，性能比方法要好 -->
			<span>计算属性来实现数组的和：{{csum}}</span>
			<div>
				计算属性传值
			</div>
			<span>没有返回值的计算属性：{{c1}}</span>
			<span>返回值为函数的计算属性：{{c2(1, 2)}}</span>
			<span>返回值为函数的计算属性：{{c2(1, 2)}}</span>
			<span>c3：{{c3}}</span>
			<button type="button" @click="c3 = 50">给c3点击赋值</button>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el: "#app",
				data: {
					msg: "这是一个消息",
					arr: [1, 4, 2, 3, 7]
				},
				methods: {
					sum() {
						console.log("sum方法")
						let sum = 0;
						for (let item of this.arr) {
							sum += item;
						}
						return sum;
					}
				},
				computed: {
					csum() {
						console.log("csum方法")
						let sum = 0;
						for (let item of this.arr) {
							sum += item;
						}
						return sum;
					},
					c1(msg) {
						//msg：就是vue实例本身。vue不需要传，直接通过this获取
						console.log("计算属性", msg, this);
					},
					c2() {
						/*
							JS方法的返回值
								普通类型，数字number、字符串string、boolean等
								void：没有返回值
								返回函数，一般是返回匿名函数
						*/
						console.log("c2-------1")
						return function(a, b) {
							console.log("c2-------2")
							return a + b;
						}
					},
					c3: {
						get: function() {
							// return this.msg;
						},
						set: function(newValue) {
							console.log(newValue);
							// this.msg = newValue
						}
					}
				},
				watch: {
					msg: function() {
						console.log("msg已经变化")
					},
					c3: function() {
						console.log("c3已经变化")
					}
				}
			})
		</script>
	</body>
</html>
